<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %>
<html>
<head>
<title></title>
<style>
.divTable
{
            width: 100%;
            display:block;
            padding-top:10px;
            padding-bottom:10px;
            padding-right:10px;
            padding-left:10px; 
}
.divRow
{
         width: 99%; 
         display:block;
         padding-bottom:5px;
}
.divColumn
{
         float: left;
         width: 40%;
         display:block;
}
</style>
<script language="javascript" src="<%=request.getContextPath()%>/dorado/smartweb2.loadUserLib.d?file=/lib/jquery1.8.2.min.js"></script>
 <script  src="<%=request.getContextPath()%>/dorado/smartweb2.loadUserLib.d?file=/lib/highcharts2.3.5.js"></script>
<script   src="<%=request.getContextPath()%>/dorado/smartweb2.loadUserLib.d?file=/lib/exporting2.3.5.js"></script>
<script type="text/javascript"> 
	var chartSex;
			$(document).ready(function() {
				chartSex = new Highcharts.Chart({
					chart: {
						renderTo: 'DivChartSex'
					},
					title: {
						text: ''
					},
					plotArea: {
						shadow: null,
						borderWidth: null,
						backgroundColor: null
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: []
					}]
				});
			});
			
		/////////////	
	var chartAge;
			$(document).ready(function() {
				chartAge = new Highcharts.Chart({
					chart: {
						renderTo: 'DivChartAge'
					},
					title: {
						text: ''
					},
					plotArea: {
						shadow: null,
						borderWidth: null,
						backgroundColor: null
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: []
					}]
				});
			});
			//////////////////////
      var chartEdu;
			$(document).ready(function() {
				chartEdu = new Highcharts.Chart({
					chart: {
						renderTo: 'DivChartEdu'
					},
					title: {
						text: ''
					},
					plotArea: {
						shadow: null,
						borderWidth: null,
						backgroundColor: null
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: []
					}]
				});
			});
					//////////////////////
      var chartMarry;
			$(document).ready(function() {
				chartMarry = new Highcharts.Chart({
					chart: {
						renderTo: 'DivChartMarry'
					},
					title: {
						text: ''
					},
					plotArea: {
						shadow: null,
						borderWidth: null,
						backgroundColor: null
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: []
					}]
				});
			});				
		</script>
</head>
<body>
  <d:View config="com.xr.stat.longWorkYears">
    <d:AutoForm id="formCdn" />

  <div class='divRow'>
  <div class='divColumn'><d:DataTable id="tableSex" /></div>
  <div class='divColumn'><div id="DivChartSex" style="width:100%;min-width: 300px; max-width: 300px; height: 250px; margin: 0 auto"></div></div>
  <div>
    <div class='divRow'>
  <div class='divColumn'><d:DataTable id="tableAge" /></div>
  <div class='divColumn'><div id="DivChartAge" style="width:100%;min-width: 300px; max-width: 300px; height: 250px; margin: 0 auto"></div></div>
  <div>
    <div class='divRow'>
  <div class='divColumn'><d:DataTable id="tableEdu" /></div>
 <div class='divColumn'> <div id="DivChartEdu" style="width:100%;min-width: 300px; max-width: 300px; height: 250px; margin: 0 auto"></div></div>
  <div> 
      <div class='divRow'>
  <div class='divColumn'><d:DataTable id="tableMarry" /></div>
  <div class='divColumn'><div id="DivChartMarry" style="width:100%;min-width: 300px; max-width: 300px; height: 250px; margin: 0 auto"></div></div>
 
  <div> 
  </d:View>
</body>
</html>
